<template>
    <div class="my-container">
		<TmallNavBar>
            <template #default>我的</template>
        </TmallNavBar>
	    <div class="my-userinfo-container">
	
			<!-- 头像昵称区域 -->
			<div class="top-box">
				<!-- 头像 -->
				<div class="avatar-box" v-if="userStore.profile" @click="navTo('/userSet')">
					<van-image v-if="!userStore.profile.user.avatar_url" :src="avatarImage" />
					<van-image round class="image" v-else :src="global.MINIO_FILE_DOMAIN + userStore.profile.user.avatar_url" />
				</div>
				
				<!-- 用户名 -->
				<div v-if="userStore.profile?.user.username" class="nickname">
					<van-icon name="user-o" color="#fff" />
					{{userStore.profile.user.username}}
				</div>
				
				<div v-else  class="nickname" @click="navTo('/passwordLogin')">点击登录</div>
				
				<!-- 手机号 -->
				<div v-if="userStore.profile?.user.mobile" class="mobile">
					<van-icon name="phone-o" color="#fff" />
					{{userStore.profile.user.mobile}}
				</div>
			</div>
		
		
			<!-- 面板的列表区域 -->
			<div class="panel-list">
				<!-- 第一个面板 -->
				<div class="panel">
					<!-- panel 的主体区域 -->
					<div class="panel-body">
						<!-- panel 的 item 项 -->

						<!-- 收藏的店铺 -->
						<div class="panel-item" @click="navTo('/shopCollect')">
							<span class="panel-item-num">{{collectShopNum}}</span>
							<span>收藏的店铺</span>
						</div>

						<!-- 收藏的商品 -->
						<div class="panel-item" @click="navTo('/goodsCollect')">
							<span class="panel-item-num">{{collectGoodsNum}}</span>
							<span>收藏的商品</span>
						</div>

						<!-- 关注的商品 -->
						<div class="panel-item" @click="navTo('/goodsFollow')">
							<span class="panel-item-num">{{followGoodsNum}}</span>
							<span>关注的商品</span>
						</div>

						<!-- 足迹 -->
						<div class="panel-item" @click="navTo('/footprint')">
							<span class="panel-item-num">{{footprintNum}}</span>
							<span>足迹</span>
						</div>
					</div>
				</div>
		
				<!-- 第二个面板 -->
				<div class="panel">
					<!-- 面板的标题 -->
					<div class="panel-title">
						<span class="order-title">我的订单</span>
						<div class="order-all-box" @click="$router.push('/orderList?status=0')">
							<span class="order-all">全部订单</span>
							<span class="icon iconfont icon-youjiantoucu"></span>
						</div>
					</div>
					<!-- 面板的主体 -->
					<div class="panel-body">
						<!-- 面板主体中的 item 项 -->
						<!-- 待付款 -->
						<van-badge 
							:content="waitPayNum"
							:show-zero="showZero"
							:offset="[-3, 10]"
						>
							<div class="panel-item" @click="$router.push('/orderList?status=1')">
								<span class="icon iconfont icon-tongguodaifukuan"></span>
								<span>待付款</span>
							</div>
						</van-badge>

						<!-- 待发货 -->
						<van-badge
							:content="waitShipmentNum"
							:show-zero="showZero"
							:offset="offset"
						>
							<div class="panel-item" @click="$router.push('/orderList?status=2')">
								<span class="icon iconfont icon-wodedaifahuo3dtouchshangpinxiangqing"></span>
								<span>待发货</span>
							</div>
						</van-badge>

						<!-- 待收货 -->
						<van-badge
							:content="waitReceivingNum"
							:show-zero="showZero"
							:offset="offset"
						>
							<div class="panel-item" @click="$router.push('/orderList?status=3')">
								<span class="icon iconfont icon-daishouhuo"></span>
								<span>待收货</span>
							</div>
						</van-badge>

						<!-- 待评价 -->
						<van-badge
							:content="waitEvaluateNum"
							:show-zero="showZero"
							:offset="offset"
						>
							<div class="panel-item" @click="$router.push('/orderList?status=4')">
								<span class="icon iconfont icon-pinglun1"></span>
								<span>待评价</span>
							</div>
						</van-badge>

						<!-- 退款 -->
						<van-badge
							:content="refundNum"
							:show-zero="showZero"
							:offset="[-14, 10]"
						>
							<div class="panel-item" @click="$router.push('/refundOrder')">
								<span class="icon iconfont icon-tuikuan"></span>
								<span>退款/退货</span>
							</div>
						</van-badge>
					</div>
				</div>
		
				<!-- 第三个面板 -->
				<div class="panel">
					<van-cell
						size="large"
						:icon="item.icon"
						v-for="(item,index) in menus" 
						:key="index" 
						:title="item.title" 
						is-link
						:to="item.url" 
					/>
				</div>
			</div>
		</div>
	</div>
</template>
  
<script setup>
import { ref, inject, onMounted } from "vue"
import { useUserStore } from '@/store/modules/user'
import { reqOrderTotalAPI } from "@/apis/order"
import {useRouter} from 'vue-router'
import { reqUserGoodsCollectTotalAPI } from "@/apis/goodsCollect"
import { reqUserGoodsFollowTotalAPI } from "@/apis/goodsFollow"
import { reqUserFootprintTotalAPI } from "@/apis/footprint"
import avatarImage from '@/assets/images/avatar.png'

// 全局属性
const global = inject('global')

// 用户存储
const userStore = useUserStore()

// 购物车存储
// const cartStore = useCartStore()

// 路由器
const router = useRouter()



// --------------------- 获取收藏店铺/商品/关注的商品数量/足迹数量功能开始 ---------------------
// 收藏的店铺数量
const collectShopNum = ref(0)

// 收藏的商品数量
const collectGoodsNum = ref(0)

// 关注的商品数量
const followGoodsNum = ref(0)

// 足迹数量
const footprintNum = ref(0)

// 获取收藏商品数量
const getUserGoodsCollectTotal = async () => {
	const result =await reqUserGoodsCollectTotalAPI()
	collectGoodsNum.value = result.data.total
}

// 获取关注商品数量
const getUserGoodsFollowTotal = async () => {
	const result =await reqUserGoodsFollowTotalAPI()
	followGoodsNum.value = result.data.total
}

// 获取足迹数量
const getUserFootprintTotal = async () => {
	const result =await reqUserFootprintTotalAPI()
	footprintNum.value = result.data.total
}
// --------------------- 获取收藏店铺/商品/关注的商品数量/足迹数量功能结束 ---------------------






// --------------------- 获取各种状态的订单数量功能开始 ---------------------
// 待付款订单数量
const waitPayNum = ref(0)

// 待发货订单数量
const waitShipmentNum = ref(0)

// 待收货订单数量
const waitReceivingNum = ref(0)

// 待评价订单数量
const waitEvaluateNum = ref(0)

// 退款订单数量
const refundNum = ref(0)

// 偏移量
const offset = ref([0, 10])

// 当 content 为数字 0 或字符串 '0' 时，是否展示徽标
const showZero = ref(false)

const getOrderTotal = async (status) => {
	const result = await reqOrderTotalAPI({status, is_delete: 0})
	if (status == 1) { // 待付款订单数量
		waitPayNum.value = result.data.total
	} else if (status == 2) { // 待发货订单数量
		waitShipmentNum.value = result.data.total
	} else if (status == 3) { // 待收货订单数量
		waitReceivingNum.value = result.data.total
	} else if (status == 4) { // 待评价订单数量
		waitEvaluateNum.value = result.data.total
	} else if (status == 5) { // 退款订单数量
		refundNum.value = result.data.total
	}
}




onMounted(async () => {
	// 设置购物车数量图标
	// uni.setTabBarBadge({
	// 	index: 2,
	// 	text: cartStore.validTotal + ''
	// })

	// 刷新TOKEN
	// await userStore.refreshToken('/pages/me/me')

    await Promise.all([
        getOrderTotal(1),
        getOrderTotal(2),
        getOrderTotal(3),
        getOrderTotal(4),
        getOrderTotal(5),
        getUserGoodsCollectTotal(),
        getUserGoodsFollowTotal(),
		getUserFootprintTotal()
    ])
})
// --------------------- 获取各种状态的订单数量功能结束 ---------------------

// 菜单栏
const menus =  ref(
	[
		{
			title: '收货地址',
			url: '/deliveryAddress',
			icon: 'location-o'
		},
		{
			title: '个人设置',
			url: '/userSet',
			icon: 'setting-o'
		},
		{
			title: '意见反馈',
			url: '/feedback',
			icon: 'envelop-o'
		}
	]
)

// 页面跳转
const navTo = (url) => {
    router.push({path: url})
}
</script>

<style lang="scss">
page,
.my-container {
    height: 100%;
}
.my-userinfo-container {
    height: calc(100vh - 50px);
    background-color: ghostwhite;
	margin-top: 45px;
}
.top-box {
    height: 200px;
    background-color: #27BA9B;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	.avatar-box {
		display: flex;
		align-items: center;
		justify-content: center;
	    width: 100px;
		height: 100px;
	    border-radius: 50%;
	    box-shadow: 0 1px 10px gray;
		.image {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			padding: 2px;
			border: 1px solid ghostwhite;
		}
	}
	
	.nickname {
	    color: white;
	    font-weight: bold;
	    font-size: 16px;
	    margin-top: 10px;
	}
	.mobile {
		color: white;
		font-weight: bold;
		font-size: 13px;
		margin-top: 10px;
	}
}


.panel-list {
    padding: 0 10px;
    position: relative;
    top: -10px;
}

.panel {
    background-color: white;
    border-radius: 3px;
    margin-bottom: 8px;
}

.panel-title {
    line-height: 45px;
    padding-left: 10px;
    font-size: 15px;
    border-bottom: 1px solid #f4f4f4;
	display: flex;
	justify-content: space-between;
	.order-title {
		font-weight: bold;
	}
	.order-all-box {
		margin-right: 9px;
		color: #27BA9B;
		.order-all {
			font-size: 14px;
		}
		.icon {
			font-size: 12px;

		}
	}
}

.panel-body {
    display: flex;
    justify-content: space-around;
}

.panel-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    font-size: 14px;
    padding: 12px 0;
	.panel-item-num {
		color: #27BA9B;
		font-weight: bold;
		padding-bottom: 7px;
	}
}

.panel-list-item {
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    padding: 0 10px;
}

.icon {
	font-size: 34px;
}

.btn-logout {
    width: 100%;
}
</style>
  